
<div id="dialog-add" style="display: none;padding: 10px 15px;">
    <blockquote class="layui-elem-quote" style="padding: 5px;font-size: 12px">
        <p>提示：</p>
        <ul>
            <li>可以使用 <xmp style="display: inline-block"><a href="http://xxxx.com/">链接文字</a></xmp>格式添加链接</li>
            <li>内容可以使用[昵称]占位符，最终会被实际的用户昵称代替</li>
        </ul>
    </blockquote>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="title" placeholder="" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请输入内容</label>
            <div class="layui-input-block">
                <textarea name="content" required  lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add">提交</button>
            </div>
        </div>
    </form>
</div>

<form class="layui-form" action="" style="margin: 20px;">
    <div class="layui-row">
        <div class="layui-col-sm7">
            <!--预留搜索-->
        </div>
        <div class="layui-col-sm5 layui-col-sm-offset7 tr">
            <input type="checkbox" lay-filter="ids" title="全选" id="ids">
            <div class="layui-btn-group">
                <a class="layui-btn  layui-btn-sm layui-btn-danger" onclick="clickDelBatch()">
                    <i class="fa fa-trash-o"></i>批量删除
                </a>
                <button type="button" class="layui-btn  layui-btn-sm" id="picker-add">
                    <i class="fa fa-plus"></i>新增文本
                </button>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <table class="layui-table" lay-skin="line">
            <colgroup>
                <col width="50">
                <col>
                <col width="100">
            </colgroup>
            <tbody>
            {volist name="data_list" id="item"}
            <tr>
                <td>
                    <input
                        type="checkbox"
                        class="id"
                        lay-filter="id"
                        value="{$item.id}"
                        lay-skin="primary"
                        data-content="{$item.content}"
                    />
                </td>
                <td><pre>{$item.content}</pre></td>
                <td>
                    <a href="javascript:;" onclick="clickDelOne('{$item.id}')" class="layui-btn layui-btn-danger layui-btn-sm">删除</a>
                </td>
            </tr>
            {/volist}
            </tbody>
        </table>
    </div>
    <div id="page">
        {$pager|raw}
    </div>
</form>
<div class="bottom">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn bg-success" onclick="clickSure();">确定</button>
            <button class="layui-btn layui-btn-primary js-cancel-btn">取消</button>
        </div>
    </div>
</div>

<script>
    var parent_index //获取窗口索引
            ,ids = []
            ,$checkBoxes = []
            ,dataLen = parseInt("{:count($data_list)}")
    , clickDelOne
    , clickDelBatch
    , clickSure;

    layui.use(['jquery','form'],function(){
        var form = layui.form
        , $ = layui.jquery;

        parent_index = parent.layer.getFrameIndex(window.name);

        //刷新界面 所有元素
        form.render();

        //点击删除单个
        clickDelOne = function (id) {
            ids = [id];
            delRequest()
        };
        //点击批量删除
        clickDelBatch = function (id) {
            $.each($('.id:checked'), function(i, item){
                ids.push($(item).val());
            });
            delRequest()
        };

        //点击确认
        clickSure = function () {
            var list = [];
            $('.id:checked').each(function (i, item) {
                list.push({id: $(item).val(), content: $(item).data('content')});
            });
            if(list.length < 1){
                layer.alert("请选择文本");
                return;
            }
            parent.setTextValue(list, "{$field}");
            parent.layer.close(parent_index);
        };

        $(function () {
            $checkBoxes = $('.id');
            //点击取消
            $('.js-cancel-btn').on('click', function () {
                parent.layer.close(parent_index);
            });

            $("#picker-add").on('click', function () {
                layer.open({
                    title: "新增文本内容",
                    type: 1,
                    shift: 2,
                    resize: false,
                    area: ['90%', '90%'],
                    shadeClose: false,
                    content: $('#dialog-add') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            });
        });

        form.on('submit(add)', function (data) {
            var loading_index = layer.load(1);
            $.post('{:url("text")}', data.field, function (res) {
                if(res.code === 1){
                    layer.msg(res.msg, {time: 1000}, function () {
                        location.reload();
                    });
                }else{
                    layer.alert(res.msg);
                }
                layer.close(loading_index);
            });
            return false;
        });

        //监听全选
        form.on('checkbox(ids)', function(data){
            $checkBoxes.prop('checked', data.elem.checked);
            layui.form.render('checkbox');
        });
        //监听单个选中
        form.on('checkbox(id)', function (data) {
            $("#ids").prop('checked', $('.id:checked').length < dataLen ? false : true);
            layui.form.render('checkbox');
        });

        //请求服务端进行删除操作
        var delRequest = function () {
            if(ids.length < 1){
                layer.alert('请选中要删除的数据');
            }
            layer.confirm('删除后无法恢复，你确定吗？', {
                title: '提示',
                btn: ['是','不'] //按钮
            }, function(){
                var loading_index = layer.load(1);
                $.post("{:url('delPost')}", {'ids': ids, type: 'text'}, function (res) {
                    if(res.code === 1){
                        layer.msg(res.msg, {time: 1000}, function () {
                            location.reload();
                        });
                    }else{
                        layer.alert(res.msg);
                    }
                    layer.close(loading_index);
                })
            });
        };
    });
</script>

<style>
    body{background-color: #fff;}

    .layui-form-checkbox[lay-skin=primary]{height: 19px !important;margin-top: -12px;margin-left: -1px;}
    #page{margin: 20px auto;text-align: center;}
    .bottom{
        background-color: #f8f8f8;line-height: 52px;height: 52px;position: fixed;text-align: center;
        width: 100%; bottom: 0;
    }
</style>

